<template>
    <div class="appeal">
        <a-modal v-drag-modal :width="650" class="appealDialog" title="我要申诉" :visible="visible" @cancel="handleCancel"
            :maskClosable="false">
            <template slot="footer">
                <a-button style="margin-left: 10px;" @click="resetForm">取消</a-button>
                <a-button style="margin-top:0;" type="primary" html-type="submit" @click="onSubmit">保存</a-button>
            </template>
            <a-form-model ref="ruleForm" :model="queryForm" :rules="rules" labelAlign="left" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-form-model-item label="申诉原因" prop="remark">
                    <a-textarea v-model="queryForm.remark" placeholder="请输入至少五个字符" :rows="6" />
                </a-form-model-item>
                <a-form-model-item label="上传附件" prop="file">
                    <a-upload v-model="queryForm.file" name="file" :multiple="true" action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                        :headers="headers" @change="handleChange">
                        <a-button> <a-icon type="upload" />上传文件</a-button>
                    </a-upload>
                </a-form-model-item>
            </a-form-model>
        </a-modal>
    </div>
</template>
<script>
export default {
    props: ['showFlag'],
    data() {
        return {
            visible: false,
            labelCol: {
                span: 4,
            },
            wrapperCol: {
                span: 19
            },
            queryForm: {},
            rules: {
                remark: [
                    { required: true, message: '请输入至少五个字符', trigger: 'blur' },
                ],
                file: [
                    { required: true, message: '请上传文件', trigger: 'change' },
                ]
            },
            headers: {
                authorization: 'authorization-text',
            },
        }
    },
    watch: {
        showFlag(next, prev) {
            if (next != prev) {
                var self = this;
                self.visible = !self.visible;
            }
        }
    },
    methods: {
        handleCancel() {
            this.visible = false;
        },
        onSubmit() {
            this.$refs.ruleForm.validate(valid => {
                if (valid) {
                    this.$message.success('填写完成，待调试')
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm() {
            this.queryForm = {};
            this.$refs.ruleForm.resetFields();
            this.visible = false;
        },
        handleChange(info) {
            if (info.file.status !== 'uploading') {
                console.log(info.file, info.fileList);
            }
            if (info.file.status === 'done') {
                this.$message.success(`${info.file.name} file uploaded successfully`);
            } else if (info.file.status === 'error') {
                this.$message.error(`${info.file.name} file upload failed.`);
            }
        },
    },
}
</script>
<style lang="less" scoped></style>
